<template>
  <div>
    <n-thing>
      <template #header>
        <span style="font-size: 15px;font-weight: 400;"> {{ title }} </span>
      </template>
      <template #header-extra>
        <n-button text type="info" @click="showSearchForm = !showSearchForm">
          <template #icon>
            <o-icon name="FilterEdit" />
          </template>
          <span> 搜索条件 &nbsp; </span>
          <o-icon :name="showSearchForm ? 'ChevronUp' : 'ChevronDown'" />
        </n-button>
      </template>
      <div>
        <n-collapse-transition :show="showSearchForm" style="margin-top: 10px;">
          <div class="form">
            <ocean :use="form" :show-feedback="false"></ocean>
          </div>
          <n-space justify="center" size="large" style="margin-bottom: 10px">
            <n-button type="primary" @click="query">
              <o-icon name="Search"></o-icon>&nbsp;查询
            </n-button>
            <n-button @click="form.clearModel(); query()">
              <o-icon name="ErrorOutline"></o-icon>&nbsp;清空
            </n-button>
          </n-space>
        </n-collapse-transition>
        <n-space justify="start" v-if="buttons.length" style="margin-bottom: 10px">
          <ocean :use="buttons"></ocean>
        </n-space>
        <ocean :use="table" v-if="table.columns.length"></ocean>
      </div>
      <template #footer>
        <n-space justify="end">
          <ocean :use="pagination"></ocean>
        </n-space>
      </template>
    </n-thing>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue';

let props = defineProps<{
  ocean: any,
  title: string,
  query?: Function,
}>();

let template = props.ocean;
let form = template.form;
let formItems = form.formItems;
let buttons = template.buttons;
let table = template.table;
let pagination = template.pagination;

let showSearchForm = ref(false);

const query = () => {
  pagination&&pagination.setPage(1);
  template.query()
}

query();

</script>
<style lang="scss" scoped>
.table_title {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.form {
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 10px;

  @include themeify {
    background: theme('bg_secondary');
    border: 1px solid theme('border');
  }
}

.extra {
  font-weight: bold;

  @include themeify {
    color: theme('primary');
  }
}
</style>